<template>
  <div class="app-container">
    <div class="content-wrapper">
      <!-- 面试记录表格 -->
      <div class="interview-table-wrapper">
        <div class="table-header">
          <div class="header-left">
            <h1>面试记录</h1>
            <p>查看并管理所有面试记录和结果</p>
          </div>
          <div class="header-right">
            <el-button type="primary" @click="handleAddInterview" class="add-btn">
              <el-icon><Plus /></el-icon>
              安排新面试
            </el-button>
          </div>
        </div>

        <div class="table-container">
          <el-table 
            :data="tableData" 
            style="width: 100%" 
            v-loading="loading"
            border
            @row-click="viewRecord"
            :header-cell-style="{
              background: '#f5f7fa',
              color: '#1f2f3d',
              fontWeight: '600',
              height: '56px'
            }"
          >
            <el-table-column label="候选人" min-width="180" class="candidate-column">
              <template #default="scope">
                <div class="candidate-info">
                  <div class="avatar" :style="{ backgroundColor: getAvatarColor(getCandidateName(scope.row.candidateId)) }">
                    {{ getInitials(getCandidateName(scope.row.candidateId)) }}
                  </div>
                  <span class="candidate-name">{{ getCandidateName(scope.row.candidateId) }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="positionId" label="职位" min-width="150" class="position-column">
              <template #default="scope">
                {{ getPositionName(scope.row.positionId) }}
              </template>
            </el-table-column>
            <el-table-column prop="interviewer" label="面试官" min-width="150" class="interviewer-column">
              <template #default="scope">
                <div class="interviewer-info">
                  <el-icon><User /></el-icon>
                  <span>数字人-{{ getInterviewerName(scope.row.digitalInterviewerId) }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="interviewDate" label="面试日期" min-width="120" class="date-column">
              <template #default="scope">
                <div class="date-info">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ formatDate(scope.row.interviewDate) || '未设置' }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="时长" min-width="100" class="duration-column">
              <template #default="scope">
                <div class="duration-info">
                  <el-icon><Timer /></el-icon>
                  <span>{{ scope.row.duration || 0 }}分钟</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="100" class="status-column">
              <template #default="scope">
                <el-tag
                  :type="getStatusType(scope.row.candidateId)"
                  effect="light"
                  size="large"
                  class="status-tag"
                >
                  {{ getStatusText(scope.row.candidateId) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="得分" min-width="100" class="score-column">
              <template #default="scope">
                <div class="score-info">
                  <span class="score">{{ scope.row.score || 0 }}</span>
                  <span class="total">/100</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="comments" label="面试官评语" min-width="200" class="comments-column">
              <template #default="scope">
                <div class="comments-content">
                  {{ scope.row.comments || '暂无评语' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" min-width="160" class="create-time-column">
              <template #default="scope">
                <div class="time-info">
                  <el-icon><Clock /></el-icon>
                  <span>{{ formatDateTime(scope.row.createdAt) || '未知' }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="updatedAt" label="更新时间" min-width="160" class="update-time-column">
              <template #default="scope">
                <div class="time-info">
                  <el-icon><Clock /></el-icon>
                  <span>{{ formatDateTime(scope.row.updatedAt) || '未知' }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280" fixed="right" class="operation-column">
              <template #default="scope">
                <div class="operation-buttons">
                  <el-button 
                    type="primary" 
                    link
                    @click.stop="viewRecord(scope.row)"
                    class="action-btn"
                  >
                    <el-icon><View /></el-icon>
                    <span>查看</span>
                  </el-button>
                  <el-button 
                    type="primary" 
                    link
                    @click.stop="handleEdit(scope.row)"
                    class="action-btn"
                  >
                    <el-icon><Edit /></el-icon>
                    <span>编辑</span>
                  </el-button>
                  <el-button 
                    type="danger" 
                    link
                    @click.stop="deleteRecord(scope.row.id)"
                    class="action-btn"
                  >
                    <el-icon><Delete /></el-icon>
                    <span>删除</span>
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
          <div class="pagination-info">
            显示 {{ startIndex }} 到 {{ endIndex }}，共 {{ total }} 条记录
          </div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>

    <!-- 添加/编辑面试对话框 -->
    <el-dialog
      :title="form.id ? '编辑面试' : '安排面试'"
      v-model="dialogVisible"
      width="50%"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="interview-form">
        <el-form-item label="候选人" prop="candidateId">
          <el-select v-model="form.candidateId" placeholder="请选择候选人" clearable>
            <el-option
              v-for="item in candidates"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="职位" prop="positionId">
          <el-select v-model="form.positionId" placeholder="请选择职位" clearable>
            <el-option
              v-for="item in positions"
              :key="item.id"
              :label="item.positionName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="面试类型" prop="interviewType">
          <el-select v-model="form.interviewType" placeholder="请选择面试类型">
            <el-option label="数字人面试" value="数字人面试" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试日期" prop="interviewDate">
          <el-date-picker
            v-model="form.interviewDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>

        <el-form-item label="面试时间" prop="interviewTime">
          <el-time-picker
            v-model="form.interviewTime"
            placeholder="选择时间"
          />
        </el-form-item>

        <el-form-item label="时长" prop="duration">
          <el-input-number 
            v-model="form.duration" 
            :min="15" 
            :max="180"
            placeholder="请输入面试时长（分钟）"
          />
        </el-form-item>

        <el-form-item label="面试官" prop="interviewerId">
          <el-select v-model="form.interviewerId" placeholder="请选择面试官" clearable>
            <el-option
              v-for="item in interviewers"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="评分" prop="score">
          <el-input-number 
            v-model="form.score" 
            :min="0" 
            :max="100"
            :step="1"
            placeholder="请输入评分（0-100分）"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">{{ form.id ? '保存' : '安排面试' }}</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 面试详情对话框 -->
    <el-dialog
      title="面试详情"
      v-model="detailDialogVisible"
      width="70%"
      destroy-on-close
    >
      <div v-loading="loadingResponses" class="interview-detail">
        <!-- 基本信息部分 -->
        <div class="detail-section">
          <h3>基本信息</h3>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="候选人">
              {{ getCandidateName(currentRecord?.candidateId) }}
            </el-descriptions-item>
            <el-descriptions-item label="职位">
              {{ getPositionName(currentRecord?.positionId) }}
            </el-descriptions-item>
            <el-descriptions-item label="面试官">
              数字人-{{ getInterviewerName(currentRecord?.digitalInterviewerId) }}
            </el-descriptions-item>
            <el-descriptions-item label="面试日期">
              {{ formatDate(currentRecord?.interviewDate) }}
            </el-descriptions-item>
            <el-descriptions-item label="面试时长">
              {{ currentRecord?.duration }}分钟
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(currentRecord?.candidateId)">
                {{ getStatusText(currentRecord?.candidateId) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="得分" :span="3">
              <div class="score-display">
                <span class="score">{{ currentRecord?.score ? Math.round((currentRecord.score / 10) * 100) : 0 }}</span>
                <span class="total">/100</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="面试官评语" :span="3">
              {{ currentRecord?.comments || '暂无评语' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 面试回复记录部分 -->
        <div class="detail-section">
          <h3>面试回复记录</h3>
          <div v-if="interviewResponses.length === 0" class="no-data">
            暂无面试回复记录
          </div>
          <el-timeline v-else>
            <el-timeline-item
              v-for="(response, index) in interviewResponses"
              :key="index"
              :timestamp="formatDateTime(response.timestamp)"
              placement="top"
            >
              <el-card class="response-card">
                <template #header>
                  <div class="response-header">
                    <span class="question">问题：{{ response.question }}</span>
                  </div>
                </template>
                <div class="response-content">
                  <p class="answer">回答：{{ response.answer }}</p>
                  <p class="standard-answer">标准答案：{{ response.standardAnswer }}</p>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Edit, Delete, Plus, User, Calendar, Timer, Clock } from '@element-plus/icons-vue'
import {
  getInterviewRecordList,
  addInterviewRecord,
  updateInterviewRecord,
  deleteInterviewRecord,
  getCandidateList,
  getPositionList,
  getInterviewerList,
  getInterviewDetail,
  getInterviewResponses,
  getQuestionDetail
} from '@/api/interviewRecordApi'

// 数据相关
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const dialogVisible = ref(false)
const formRef = ref(null)
const loadingResponses = ref(false)
const currentRecord = ref(null)
const interviewResponses = ref([])
const detailDialogVisible = ref(false)

// 下拉框数据
const candidates = ref([])
const positions = ref([])
const interviewers = ref([])

// 表单数据
const form = reactive({
  candidateId: '',
  positionId: '',
  interviewType: '',
  interviewDate: '',
  interviewTime: '',
  duration: 60,
  interviewerId: '',
  score: 0,
  comments: ''
})

// 表单验证规则
const rules = {
  candidateId: [{ required: true, message: '请选择候选人', trigger: 'change' }],
  positionId: [{ required: true, message: '请选择职位', trigger: 'change' }],
  interviewType: [{ required: true, message: '请选择面试类型', trigger: 'change' }],
  interviewDate: [{ required: true, message: '请选择面试日期', trigger: 'change' }],
  interviewTime: [{ required: true, message: '请选择面试时间', trigger: 'change' }],
  interviewerId: [{ required: true, message: '请选择面试官', trigger: 'change' }],
  duration: [
    { required: true, message: '请设置面试时长', trigger: 'blur' },
    { type: 'number', min: 15, max: 180, message: '面试时长必须在15-180分钟之间', trigger: 'blur' }
  ],
  score: [
    { type: 'number', min: 0, max: 100, message: '评分必须在0-100分之间', trigger: 'blur' }
  ]
}

// 获取面试记录列表
const fetchRecords = async () => {
  loading.value = true
  try {
    const response = await getInterviewRecordList({
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })
    if (response.code === 200) {
      // 将10分制转换为100分制显示
      tableData.value = (response.data.list || []).map(item => ({
        ...item,
        score: item.score ? Math.round((item.score / 10) * 100) : 0
      }))
      total.value = response.data.total || 0
      
      // 获取候选人数据
      await fetchCandidates()
    }
  } catch (error) {
    console.error('获取面试记录失败:', error)
    ElMessage.error('获取面试记录失败')
  } finally {
    loading.value = false
  }
}

// 计算分页信息
const startIndex = computed(() => {
  return (currentPage.value - 1) * pageSize.value + 1
})

const endIndex = computed(() => {
  return Math.min(currentPage.value * pageSize.value, total.value)
})

// 获取头像颜色
const getAvatarColor = (name) => {
  if (!name) return '#909399' // 如果没有名字，返回默认颜色
  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
  let hash = 0
  for (let i = 0; i < name.length; i++) {
    hash = name.charCodeAt(i) + ((hash << 5) - hash)
  }
  return colors[Math.abs(hash) % colors.length]
}

// 获取姓名缩写
const getInitials = (name) => {
  if (!name) return '?' // 如果没有名字，返回问号
  return name.charAt(0).toUpperCase()
}

// 获取状态类型
const getStatusType = (status) => {
  if (!status) return 'info'
  
  // 从候选人数据中获取状态
  const candidate = candidates.value.find(c => c.id === status)
  if (!candidate) return 'info'
  
  console.log('候选人数据:', candidate)
  console.log('面试结果:', candidate.interviewResult)
  
  // 根据候选人面试结果返回对应的类型
  const typeMap = {
    0: 'danger',    // 未通过
    1: 'warning',   // 待定
    2: 'success'    // 通过
  }
  return typeMap[candidate.interviewResult] || 'info'
}

// 获取状态显示文本
const getStatusText = (status) => {
  if (!status) return '未知'
  
  // 从候选人数据中获取状态
  const candidate = candidates.value.find(c => c.id === status)
  if (!candidate) return '未知'
  
  // 状态映射
  const statusMap = {
    0: '未通过',
    1: '待定',
    2: '通过'
  }
  
  return statusMap[candidate.interviewResult] || '未知'
}

// 获取候选人列表
const fetchCandidates = async () => {
  try {
    const response = await getCandidateList()
    if (response.code === 200) {
      candidates.value = response.data || []
      console.log('获取到的候选人数据:', candidates.value)
    } else {
      ElMessage.error(response.msg || '获取候选人列表失败')
    }
  } catch (error) {
    console.error('获取候选人列表错误:', error)
    ElMessage.error('获取候选人列表失败，请检查网络连接或联系管理员')
    candidates.value = [] // 设置空数组作为默认值
  }
}

// 获取职位列表
const fetchPositions = async () => {
  try {
    const response = await getPositionList()
    if (response.code === 200) {
      positions.value = response.data || []
    } else {
      ElMessage.error(response.msg || '获取职位列表失败')
    }
  } catch (error) {
    console.error('获取职位列表错误:', error)
    ElMessage.error('获取职位列表失败，请检查网络连接或联系管理员')
    positions.value = [] // 设置空数组作为默认值
  }
}

// 获取面试官列表
const fetchInterviewers = async () => {
  try {
    const response = await getInterviewerList()
    if (response.code === 200) {
      interviewers.value = response.data.records || []
    } else {
      ElMessage.error(response.msg || '获取面试官列表失败')
    }
  } catch (error) {
    console.error('获取面试官列表错误:', error)
    ElMessage.error('获取面试官列表失败，请检查网络连接或联系管理员')
    interviewers.value = []
  }
}

// 初始化表单数据
const initFormData = () => {
  form.id = null
  form.candidateId = ''
  form.positionId = ''
  form.interviewType = '数字人面试'
  form.interviewDate = ''
  form.interviewTime = ''
  form.duration = 60
  form.interviewerId = ''
  form.score = 0
  form.comments = ''
}

// 打开对话框前获取数据
const handleAddInterview = async () => {
  try {
    dialogVisible.value = true
    initFormData()
    await Promise.all([
      fetchCandidates(),
      fetchPositions(),
      fetchInterviewers()
    ])
  } catch (error) {
    console.error('初始化数据错误:', error)
    ElMessage.error('初始化数据失败')
    dialogVisible.value = false
  }
}

// 编辑时获取数据
const handleEdit = async (row) => {
  try {
    await Promise.all([
      fetchCandidates(),
      fetchPositions(),
      fetchInterviewers()
    ])
    
    // 确保日期格式正确
    const editData = {
      ...row,
      interviewDate: row.interviewDate ? new Date(row.interviewDate) : '',
      interviewTime: row.interviewTime ? new Date(`2000-01-01T${row.interviewTime}`) : '',
      positionId: row.positionId, // 确保positionId正确传递
      interviewerId: row.digitalInterviewerId, // 确保面试官ID正确传递
      interviewType: row.interviewType || '数字人面试' // 确保面试类型正确传递，默认值为数字人面试
    }
    
    Object.assign(form, editData)
    dialogVisible.value = true
  } catch (error) {
    console.error('加载编辑数据错误:', error)
    ElMessage.error('加载编辑数据失败')
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // 数据验证
        if (!form.candidateId || !form.positionId || !form.interviewType) {
          ElMessage.error('请填写必填字段')
          return
        }

        // 处理日期和时间
        let interviewDate = ''
        if (form.interviewDate) {
          const date = new Date(form.interviewDate)
          interviewDate = date.toISOString().split('T')[0]
        }

        let interviewTime = ''
        if (form.interviewTime) {
          const time = new Date(form.interviewTime)
          interviewTime = time.toTimeString().slice(0, 8)
        }

        // 将100分制转换为10分制
        const score = form.score ? Math.round((form.score / 100) * 10) : 0

        const formData = {
          id: form.id,
          candidateId: form.candidateId,
          positionId: form.positionId,
          interviewType: form.interviewType,
          interviewDate: interviewDate,
          interviewTime: interviewTime,
          duration: form.duration || 60,
          digitalInterviewerId: form.interviewerId,
          score: score,
          comments: form.comments || ''
        }
        
        let response
        if (form.id) {
          response = await updateInterviewRecord(formData)
        } else {
          response = await addInterviewRecord(formData)
        }

        if (response.code === 200) {
          ElMessage.success(form.id ? '更新成功' : '面试安排成功')
          dialogVisible.value = false
          fetchRecords()
        } else {
          ElMessage.error(response.msg || (form.id ? '更新失败' : '面试安排失败'))
        }
      } catch (error) {
        console.error('操作失败:', error)
        if (error.response) {
          console.error('错误状态码:', error.response.status)
          console.error('错误数据:', error.response.data)
          ElMessage.error(error.response.data?.msg || `请求失败: ${error.response.status}`)
        } else if (error.request) {
          console.error('未收到响应:', error.request)
          ElMessage.error('服务器未响应，请检查网络连接')
        } else {
          console.error('请求配置错误:', error.message)
          ElMessage.error('请求配置错误')
        }
      }
    }
  })
}

// 删除记录
const deleteRecord = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除这条面试记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const response = await deleteInterviewRecord(id)
    if (response.code === 200) {
      ElMessage.success('删除成功')
      fetchRecords()
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 更新记录
const updateRecord = async (record) => {
  try {
    const response = await updateInterviewRecord(record)
    if (response.code === 200) {
      ElMessage.success('更新成功')
      fetchRecords()
    }
  } catch (error) {
    ElMessage.error('更新失败')
  }
}

// 查看记录
const viewRecord = async (row) => {
  try {
    // 获取面试记录详情
    const response = await getInterviewDetail(row.id)
    if (response.code === 200) {
      currentRecord.value = response.data
      detailDialogVisible.value = true
      
      // 获取面试回复记录
      const responsesResponse = await getInterviewResponses(row.candidateId)
      if (responsesResponse.code === 200) {
        interviewResponses.value = []
        for (const response of responsesResponse.data.records) {
          try {
            // 获取问题详情
            const questionResponse = await getQuestionDetail(response.questionId)
            if (questionResponse.code === 200) {
              interviewResponses.value.push({
                question: questionResponse.data.title,
                answer: response.candidateRecover,
                standardAnswer: questionResponse.data.answer,
                timestamp: response.createdAt
              })
            } else {
              console.warn('获取问题详情失败:', questionResponse.message)
              interviewResponses.value.push({
                question: '未知问题',
                answer: response.candidateRecover,
                standardAnswer: '暂无标准答案',
                timestamp: response.createdAt
              })
            }
          } catch (error) {
            console.error('获取问题详情失败:', error)
            interviewResponses.value.push({
              question: '未知问题',
              answer: response.candidateRecover,
              standardAnswer: '暂无标准答案',
              timestamp: response.createdAt
            })
          }
        }
      } else {
        interviewResponses.value = []
        console.warn('获取面试回复记录失败:', responsesResponse.message)
      }
    }
  } catch (error) {
    console.error('获取面试记录详情失败:', error)
    ElMessage.error('获取面试记录详情失败')
  }
}

// 页面变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchRecords()
}

// 对话框关闭前的回调
const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭？')
    .then(() => {
      done()
    })
    .catch(() => {})
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  try {
    const d = new Date(date)
    return d.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  } catch (e) {
    return date
  }
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return ''
  try {
    // 如果日期时间已经是字符串格式，直接返回
    if (typeof dateTime === 'string') {
      // 检查是否是标准格式的日期时间字符串
      if (/^\d{4}-\d{2}-\d{2}/.test(dateTime)) {
        return dateTime
      }
      // 尝试解析时间戳
      const timestamp = parseInt(dateTime)
      if (!isNaN(timestamp)) {
        const d = new Date(timestamp)
        return d.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        })
      }
    }
    // 如果是时间戳或Date对象，进行格式化
    const d = new Date(dateTime)
    if (isNaN(d.getTime())) {
      return dateTime // 如果无法解析为有效日期，返回原始值
    }
    return d.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    })
  } catch (e) {
    console.error('日期格式化错误:', e, '原始值:', dateTime)
    return dateTime
  }
}

// 获取候选人名称
const getCandidateName = (candidateId) => {
  const candidate = candidates.value.find(c => c.id === candidateId)
  return candidate ? candidate.name : '未知'
}

// 获取职位名称
const getPositionName = (positionId) => {
  if (!positionId) return '未知'
  const position = positions.value.find(p => p.id === positionId)
  return position ? position.positionName : '未知'
}

// 获取面试官名称
const getInterviewerName = (interviewerId) => {
  if (!interviewerId) {
    return '未知'
  }
  const id = Number(interviewerId)
  const interviewer = interviewers.value.find(i => i.id === id)
  return interviewer ? interviewer.name : '未知'
}

// 在组件挂载时获取数据
onMounted(async () => {
  await Promise.all([
    fetchRecords(),
    fetchCandidates(),
    fetchPositions(),
    fetchInterviewers()
  ])
})
</script>

<style scoped>
.app-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.interview-table-wrapper {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0; /* 重要：防止flex子元素溢出 */
}

:deep(.el-table) {
  flex: 1;
  width: 100% !important;
}

:deep(.el-table__inner-wrapper) {
  height: 100%;
}

:deep(.el-table__body-wrapper) {
  overflow-y: auto;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

/* 调整表格列的宽度比例 */
:deep(.el-table .el-table__cell) {
  padding: 12px 0;
}

:deep(.el-table .candidate-column) {
  min-width: 180px;
  width: 15%;
}

:deep(.el-table .position-column) {
  min-width: 150px;
  width: 15%;
}

:deep(.el-table .interviewer-column) {
  min-width: 150px;
  width: 15%;
}

:deep(.el-table .date-column) {
  min-width: 120px;
  width: 12%;
}

:deep(.el-table .duration-column) {
  min-width: 100px;
  width: 10%;
}

:deep(.el-table .status-column) {
  min-width: 100px;
  width: 10%;
}

:deep(.el-table .score-column) {
  min-width: 100px;
  width: 10%;
}

:deep(.el-table .comments-column) {
  min-width: 200px;
  width: 20%;
}

:deep(.el-table .create-time-column) {
  min-width: 160px;
  width: 16%;
}

:deep(.el-table .update-time-column) {
  min-width: 160px;
  width: 16%;
}

.pagination-container {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

@media screen and (max-width: 1400px) {
  .content-wrapper {
    max-width: 100%;
    margin: 0;
  }
}

@media screen and (max-width: 768px) {
  .app-container {
    padding: 16px;
  }

  .interview-table-wrapper {
    padding: 16px;
  }

  :deep(.el-table) {
    width: 100% !important;
  }

  /* 在移动端优化表格显示 */
  :deep(.el-table .el-table__cell) {
    padding: 8px;
  }

  .table-header {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }
}

.header-left h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  margin-bottom: 8px;
  color: #1f2f3d;
}

.header-left p {
  color: #606266;
  margin: 0;
  font-size: 16px;
}

.header-right {
  padding-top: 8px;
}

.add-btn {
  padding: 12px 24px;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.add-btn .el-icon {
  font-size: 16px;
}

.candidate-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}

.candidate-name {
  font-size: 16px;
  font-weight: 600;
  color: #1f2f3d;
}

.interviewer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.interviewer-info .el-icon {
  font-size: 16px;
  color: #909399;
}

.date-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
}

.date-info .el-icon {
  font-size: 16px;
  color: #909399;
}

.duration-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  white-space: nowrap;
}

.duration-info .el-icon {
  font-size: 16px;
  color: #909399;
}

.score-info {
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.score-info .score {
  font-size: 16px;
  font-weight: 600;
  color: #1f2f3d;
}

.score-info .total {
  font-size: 14px;
  color: #909399;
}

.status-tag {
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  white-space: nowrap;
}

.operation-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  white-space: nowrap;
  min-width: 240px;
}

.action-btn {
  padding: 4px 12px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  min-width: 70px;
}

.action-btn .el-icon {
  font-size: 16px;
  margin-right: 4px;
}

.pagination-info {
  color: #606266;
  font-size: 14px;
}

:deep(.el-dialog) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-dialog__header) {
  margin: 0;
  padding: 24px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__title) {
  font-size: 20px;
  font-weight: 600;
  color: #1f2f3d;
}

:deep(.el-dialog__body) {
  padding: 24px;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #ebeef5;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #1f2f3d;
}

:deep(.el-input), :deep(.el-select), :deep(.el-date-picker), :deep(.el-time-picker) {
  width: 100%;
}

:deep(.el-select-dropdown__item) {
  padding: 8px 16px;
}

:deep(.el-button--primary) {
  font-weight: 500;
}

.interview-form {
  padding: 0 20px;
}

.interview-form :deep(.el-form-item) {
  margin-bottom: 24px;
}

.interview-form :deep(.el-input__wrapper),
.interview-form :deep(.el-select__wrapper) {
  box-shadow: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.interview-form :deep(.el-input__wrapper:hover),
.interview-form :deep(.el-select__wrapper:hover) {
  border-color: #409eff;
}

.interview-form :deep(.el-input__wrapper.is-focus),
.interview-form :deep(.el-select__wrapper.is-focus) {
  border-color: #409eff;
  box-shadow: 0 0 0 1px #409eff;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-dialog__body) {
  padding-top: 32px;
  padding-bottom: 32px;
}

:deep(.el-checkbox) {
  height: auto;
  margin-right: 0;
}

:deep(.el-table .cell) {
  padding: 8px 16px;
}

:deep(.el-pagination) {
  justify-content: flex-end;
  padding: 0;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__wrapper) {
  padding-left: 12px;
  padding-right: 12px;
}

.comments-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* 面试详情样式 */
.interview-detail {
  padding: 20px;
}

.detail-section {
  margin-bottom: 32px;
}

.detail-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2f3d;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.score-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.score-display .score {
  font-size: 24px;
  font-weight: 600;
  color: #409EFF;
}

.score-display .total {
  font-size: 16px;
  color: #909399;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 32px 0;
}

.response-card {
  margin-bottom: 16px;
}

.response-header {
  font-weight: 500;
  color: #1f2f3d;
}

.response-content {
  color: #606266;
  line-height: 1.6;
}

.response-content .answer {
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.standard-answer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #dcdfe6;
  color: #67c23a;
  font-weight: 500;
}

.evaluation {
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  margin-top: 12px;
}

.evaluation-title {
  font-weight: 500;
  color: #1f2f3d;
  margin-bottom: 8px;
}

.evaluation-content {
  color: #606266;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

:deep(.el-timeline-item__node) {
  background-color: #409EFF;
}

:deep(.el-timeline-item__timestamp) {
  color: #909399;
  font-size: 13px;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: 500;
}

:deep(.el-table .operation-column .cell) {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
</style> 